<template>
  <div class="my-props-table">
    <table>
      <template v-for="(item, index) in param" :key="index">
        <tr>
          <td class="my-label"><b>{{item.label}}:</b></td>
          <td class="my-value">
            <template v-if="item.formType === EnumFormItemType.FORM_INPUT">
              <template v-if="item.dataType === EnumFormDataType.STRING_TYPE">
                <q-input
                  dense
                  outlined
                  type="text"
                  v-model.lazy="item.value"
                  @update:model-value="refreshInfo"
                />
              </template>
              <template v-if="item.dataType === EnumFormDataType.NUMBER_TYPE">
                <q-input
                  dense
                  outlined
                  type="number"
                  v-model.lazy.number="item.value"
                  @update:model-value="refreshInfo"
                />
              </template>
            </template>
            <template v-else-if="item.formType === EnumFormItemType.FORM_SELECT_BOX">
              <q-select
                dense
                outlined
                options-dense
                :options="myOptions[index]"
                v-model.lazy="item.value"
                @update:model-value="refreshInfo"
                @mousedown.stop
              />
            </template>
            <template v-else-if="item.formType === EnumFormItemType.FORM_TOGGLE_BUTTON">
              <q-toggle
                color="green"
                true-value="1"
                false-value="0"
                v-model.lazy="item.value"
                @update:model-value="refreshInfo"
              />
            </template>
            <template v-else-if="item.formType === EnumFormItemType.FORM_COLOR_INPUT">
              <ColorInput
                v-model:color="item.value"
                @update:color="refreshInfo"
              />
            </template>
            <template v-else-if="item.formType === EnumFormItemType.FORM_CHART_ITEM_INPUT">
              <ChartItem
                v-model:chart="item.value"
                @update:chart="refreshInfo"
              />
            </template>
            <template v-else-if="item.formType === EnumFormItemType.FORM_VARIABLE_SELECT_BOX">
              <VariableSelectBox
                v-model:data="item.value"
                @update:data="refreshInfo"
              />
            </template>
          </td>
          <td class="table-ext"></td>
        </tr>
      </template>
    </table>
  </div>
</template>

<script lang="ts">
import { defineAsyncComponent, defineComponent, onMounted, onUnmounted, PropType, ref, toRefs, watch } from 'vue';
import { CPropsNode, CPropsItemVO } from 'stores/editorModels';
import { EnumFormDataType, EnumFormItemType } from 'src/util/SelectBoxOption'
import { OptionTypeItem } from 'src/hook/editor/useSelectBoxOption';
import { useCatalogTool } from 'src/hook/common/useCatalogTool';
import { cataItem } from 'src/hook/common/useCatalogType';

const ChartItem = defineAsyncComponent(() => import('components/common/ChartItemInput.vue'));
const ColorInput = defineAsyncComponent(() => import('components/common/ColorInput.vue'));
const VariableSelectBox = defineAsyncComponent(() => import('components/combination/VariableSelectBox.vue'));

export default defineComponent({
  name: 'ComponentPropsItem',
  components: {
    ColorInput,
    ChartItem,
    VariableSelectBox
  },
  props: {
    listArr: {
      type: Array as PropType<CPropsNode[]>,
      required: true
    },
    itemOptionArr: {
      type: Array as PropType<OptionTypeItem[]>,
      required: true
    },

    dataTypeArr: {
      type: Array as PropType<cataItem[]>,
      required: true
    },

    formTypeArr: {
      type: Array as PropType<cataItem[]>,
      required: true
    }
  },
  emits: ['update-list'],
  setup (props, context) {
    // 解构props
    let {
      listArr,
      itemOptionArr,
      dataTypeArr,
      formTypeArr
    } = toRefs(props);

    //id和label映射函数
    const {
      findCatalogLabel
    } = useCatalogTool();


    //响应数据
    let param = ref<CPropsItemVO[]>([]);

    //存储下拉列表的option
    let myOptions = ref<OptionTypeItem[]>([]);

    //数据更新
    const refreshInfo = () => {
      context.emit('update-list', param.value);
    };

    //初始化
    const init = () => {
      param.value.length = 0;
      listArr.value.forEach((item) => {
        param.value.push({
          id: item.id,
          label: item.label,
          value: item.value,
          dataType: findCatalogLabel(dataTypeArr.value, item.dataTypeId),
          formType: findCatalogLabel(formTypeArr.value, item.formTypeId),
          option: 'haha'
        });
      });
      debugger
      //下拉列表框内容
      updateOption();
    }

    //下拉列表更新
    const updateOption = () => {
      myOptions.value.length = 0;

      //检索
      param.value.forEach((item) => {
        if (itemOptionArr.value) {
          let index = itemOptionArr.value.findIndex((el) => (el.label === item.option));
          if (index !== -1) {
            itemOptionArr.value[index].children?.forEach((r) => {
              myOptions.value.push(r);
            })
          }
        }
      })
    }

    //监视数据变化
    watch(() => listArr, () => {
      init();
    }, { deep: true });

    watch(() => itemOptionArr, () => {
      init();
    }, { deep: true });

    watch(() => dataTypeArr, () => {
      init();
    }, { deep: true });

    watch(() => formTypeArr, () => {
      init();
    }, { deep: true });

    //挂载组件
    onMounted(() => {
      init();
    });

    //卸载组件
    onUnmounted(() => {

    })

    return {
      listArr,
      myOptions,
      param,

      EnumFormItemType,
      EnumFormDataType,
      findCatalogLabel,
      refreshInfo
    };
  }
});

</script>

<style lang="scss" scoped>
.my-props-table {
  padding: 10px;

  .my-label {
    width: 25%;
    height: 30px;
  }

  .my-value {
    width: 65%;
    height: 30px;
  }

  .table-ext {

  }
}
</style>
